import React, { useContext, useReducer, useEffect, memo, useMemo, useCallback, useState } from 'react';
import { ethers, providers } from 'ethers'
import actionTypes from '@/types'
import type { INavBarState, IHttpResponse } from '@/interface'
import style from './index.module.less';
import publicReducer from '@/store/reducers';
import SubNavBar from './sub/SubNavBar'
import context from '../../createContext';
import request from '@/utils/request'


const { NavBarContext } = context;
const { navBarReducer } = publicReducer;

interface IState {
  navBarState: INavBarState
  response: IHttpResponse<String>
}
interface IAction {
  type: string
  payload: any
}
interface IProps { }

function NavBar(props: IProps) {
  const [mintHookState, mintDispatch] = useReducer(
    navBarReducer.reducer,
    navBarReducer.initState
  );
  //useContext必须放在hooks组件里面才可以 
  const navContext = useContext(NavBarContext);
  const aitdAddCount = useCallback(() => {
    mintHookState.aitdMintCount++;
    mintDispatch({
      type: actionTypes.navBarActionType.UPDATE_STATE,
      payload: mintHookState,
    });
  }, [mintHookState])
  //--
  const aitdDecrementCount = useCallback(() => {
    mintHookState.aitdMintCount--
    mintDispatch({
      type: actionTypes.navBarActionType.UPDATE_STATE,
      payload: mintHookState,
    });
  }, [mintHookState])

  return (
    <NavBarContext.Provider value={navContext}>
      <div className={style.container}>
        <NavBarContext.Consumer>
          {({ navTitle }) => {
            return <div>{navTitle}</div>;
          }}
        </NavBarContext.Consumer>
      
        <div
          style={{
            cursor: 'pointer',
            padding: '10px',
            display: "flex",
            flexDirection: 'row'
          }}
        >
          <button onClick={() => aitdAddCount()}>
            增加aitd
          </button>
          <button onClick={() => aitdDecrementCount()}>
            减少aitd
          </button>
        </div>
        <SubNavBar />
        <div>响应aitdCount值:{mintHookState.aitdMintCount}</div>
      </div>
    </NavBarContext.Provider>
  );
}
export default NavBar;
